/* 一般在企业中使用原生开发时,会封装很多基础操作类辅助工具
    把所有小工具都挂载到window对象上,作为全局函数使用

*/

/* 
    使用说明:

        格式:

            操作说明:

            具体的函数

*/


/**
 * 功能说明
 * 
 * @method   方法
 * @type     是那类工具
 * @param    参数类型  具体参数   参数说明
 * @return   返回数据类型  说明
 * @description   对功能进行说明
 * @author    作者  @byTony
 * @date      2022-01-15 
 * 
*/


/**
 * 获取单个元素对象
 * 
 * @method   getEle(参数)
 * @param    {String}  selector   选择器
 * @description  主要用于获取原生对象
 * @return   {Object}  返回获取到的具体元素对象  
 * 
 * 
*/

function getEle(selector) {
    return document.querySelector(selector)
}

/**
 * 获取多个元素对象
 * 
 * @method   getEleAll(参数)
 * @param    {String}  selector   选择器
 * @description  主要用于获取原生对象集合
 * @return   {Object}  返回获取到的具体元素对象集合 
 * 
 * 
*/

function getEleAll(selector) {
    return document.querySelectorAll(selector)
}


/**
 * tab切换功能
 * 
 * @method   tab(参数1,参数2,参数3,参数4)
 * @param    {String}  selector   标题选择器 
 * @param    {String}  'active'   标题选中的效果样式类
 * @param    {String}  selector   内容选择器
 * @param    {String}  'on'   内容选中的效果样式类
 * @description  主要用于进行选项卡效果
 * 
 * 
*/

function tab(select1, pos1, select2, pos2) {
    //1.获取相关DOM元素
    let tabLis = getEleAll(select1);
    let tabConts =null;

    console.log(select2);//有传入第二选择器  .apiDetelsLeft>div
    console.log(select2);//没有传入第二选择器 undefined

    //正常逻辑
    // if(select2){//有传入
    //     console.log("有传入");
    //     tabConts = getEleAll(select2);
    // }else{//没有传入
    //     console.log("没有传入",tabConts);

    // }


    if(select2){//如果第二个选择器有传入,会执行以下代码,否则不执行
        tabConts = getEleAll(select2); 
    }

    //遍历给li注册点击事件
    tabLis.forEach(function (v, i) {
        // console.log(v);
        //点击事件
        v.addEventListener('click', function () {
            //把所有的li上的样式清除掉
            tabLis.forEach(function (vv, i) {
                vv.classList.remove(pos1);

                if(tabConts){//只有当第二个选择器有值时,才会执行
                    tabConts[i].classList.remove(pos2)
                }
                

            })

            //给当前li添加active
            this.classList.add(pos1);
            //对应内容 

            if(tabConts){//只有当第二个选择器有值时,才会执行
                 tabConts[i].classList.add(pos2)
            }
           

        })

    })
}